遊記ep.25 Control Zoom and Pan in Google村

第 11 屆 iThome 鐵人賽

DAY 25

自我挑戰組

Ruby菜鳥村村民遊記系列第 25 篇

11th鐵人賽 google api google map

Bunny

2019-10-10 23:19:53

1044 瀏覽

分享至

今天想介紹一下控制 Google Map 的幾個因素～
先來看看今天的程式碼：

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var locationRio = {lat: 23.5, lng: 121};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: locationRio,
          gestureHandling: 'cooperative'
        });
        var marker = new google.maps.Marker({
          position: locationRio,
          map: map,
          title: 'Hello World!'
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

今天的主角主要是要介紹gestureHandling這個屬性
他是一個讓開發者可以去設定如何跟地圖做互動的手勢屬性，
而範例中選用的屬性值是cooperative
根據官方文件提供的說明：cooperative 設定了這個屬性
他可以預防使用者使用單指來平移 map，單指可以捲動頁面若需要平移地圖則需要兩隻手指才行
但老實說自己實測的時候，單指按住後拖曳地圖一樣可以平移整個 Google Map，
主機是 mac，或者這個是針對手機平板等觸碰螢幕才有效呢？
如果有同好了解的話，也歡迎來討論一下～